<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>view/workArea/others/fseHistory</title>
		<!-- css代码 start -->
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/global.css" rel="stylesheet" />
		<link href="../../../css/style.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/mui.picker.css">
		<link rel="stylesheet" href="../../../css/mui.poppicker.css">
		<link href="../../../css/task.css" rel="stylesheet" />
		<style type="text/css">
			.d_int_tp{
				border: 0 !important;
				margin-top: 6px !important;
			}
			.select-tzstate{
				width: 100%;
				border: 0;
				color: #a9a9a9;
				font-size: 16px;
				text-align: left;
				padding: 15px;
			}
			.mui-bar-nav{
				box-shadow: 0 1px 6px #ea1e1a;
			}
		</style>
		<!-- css代码 end -->
	</head>
	<body>
		<!-- html代码 start -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">历史轨迹查询</h1>
		</header>
		<div class="mui-content">
			<div class="details_con select_con">
				<input type="hidden" id="fseId" />
				<div class="clum">
					<input type="text" class="d_int_tp" id="name" readonly="readonly" placeholder="请选择FSE" />
				</div>
				<div class="clum">
					<input type="hidden" id="startTime" />
					<input type="text" class="d_int_tp" id="startTimeSel" readonly="readonly" placeholder="请选择开始时间" />
				</div>
				<div class="clum">
					<input type="hidden" id="endTime" />
					<input type="text" class="d_int_tp" id="endTimeSel" readonly="readonly" placeholder="请选择结束时间" />
				</div>
				<div class="btm autoHeight" style="position: relative;z-index: 999;">
					<p class="selectBtn" id="searchBtn">查 询</p>
				</div>
			</div>
		</div>
		<div class="mui-content" id="container" style="height: 68%;">
		</div>
		<!-- html代码 end -->

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/utils/rolldate.min.js"></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<!-- 基础js end -->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1ca9acc9d0ea8d20406b89acb63c2b4a"></script>

		<script type="text/javascript" charset="utf-8">
			// 集群,点标记(多个)
			var cluster, markers = [];
			// 车辆标记
			var marker = [];
			// 轨迹路线
			var lineArr = [];
			var polyline;
			
			// 创建地图实例
			var map;
			
			(function($, doc) {
				$.init();
			
				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					if (!app.getNetworkState()) {
					    app.toast("当前网络连接失败")
					    return
					}
					map = new AMap.Map('container', {
						zoom: 10,//级别
						center: [121.473658,31.230378],//中心点上海
						resizeEnable: true,
						offset: new AMap.Pixel(-13, -30)
					});
					h("#searchBtn").tap(function() {
						// 清空地图
						map.clearMap();
						lineArr = [];
						// 查询
						selectFseLocation();
					})
					
					// fse下拉
					h('#name').tap(function() {
						var userPicker = new $.PopPicker();
						app.showWaiting('加载中...')
						ajaxPost(BASE_URL + 'cc/engineerManage/selectFseByTlid', {
							"teamleaderId": app.getUser().enginnerId
						}, function(data) {
							app.closeWaiting()
							// console.log(JSON.stringify(data))
							if (!data.data) {
								app.toast("无FSE数据")
								return;
							}
							userPicker.setData(data.data);
							userPicker.show(function(items) {
								h('#name').val(items[0].text)
								h('#fseId').val(items[0].value)
								userPicker.dispose()
							});
						});
					});
					
					// 开始时间
					new Rolldate({
						el: '#startTimeSel',
						format: 'YYYY-MM-DD hh:mm',
						beginYear: 2015,
						endYear: 2050,
						trigger: 'click',
						lang: {
							title: '请选择开始日期',
						},
						confirm: function(date) {
						}
					})
					
					// 结束日期
					new Rolldate({
						el: '#endTimeSel',
						format: 'YYYY-MM-DD hh:mm',
						beginYear: 2015,
						endYear: 2050,
						trigger: 'click',
						lang: {
							title: '请选择结束日期',
						},
						confirm: function(date) {
						}
					})
				});
			}(mui, document));
			
			// 查询fse实时位置
			function selectFseLocation() {
				var name = h("#name").val();
				var startTime = h("#startTimeSel").val();
				var endTime = h("#endTimeSel").val();
				if (!name) {
					app.toast("请输入工程师名称");
					return false;
				}
				if (!startTime) {
					app.toast("请选择开始时间");
					return false;
				}
				if (!endTime) {
					app.toast("请选择结束时间");
					return false;
				}
				var sd = startTime.replace(/-/g,'/').trim();
				var ed = endTime.replace(/-/g,'/').trim();
				
				if(new Date(ed).getTime() < new Date(sd).getTime()){
					app.toast("开始时间应小于结束时间");
					return false;
				}
				if(new Date(ed).getTime() - new Date(sd).getTime() > (24*60*60*1000)){
					app.toast("时间长度不可大于24小时");
					return false;
				}
				var param = {
					// "teamleaderId": app.getUser().teamleaderId,
					"fseId": h("#fseId").val(),
					"name": name,
					"startTime": startTime,
					"endTime": endTime
				}
				// 查询post
				app.showWaiting('加载中...')
				ajaxGet(BASE_URL + "cc/location/getFseLocationLog", param, function(data) {
					app.closeWaiting()
					console.log(JSON.stringify(data))
					if (data.code == 200) {//查询成功
						if (data.data != null && data.data.length > 0) {
							loadTrack(data.data);
						} else {
							app.toast("查询无结果")
						}
					} else {//查询失败
						
					}
				}, function(errorMsg) {
					app.closeWaiting()
					app.toast("查询无结果")
					console.log(JSON.stringify(errorMsg))
				});
			}
			
			//创建历史轨迹组件
			function loadTrack(list){
				// 清空地图
				map.clearMap();
				lineArr = [];
				if (!list) {
					return false;
				}
				var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
				// 循环list
				for(var i = 0; i < list.length; i ++) {
					var info = list[i];
					var lnglat = [info.postx, info.posty];
							
					//记录轨迹经纬度
					lineArr.push(lnglat);
							
					//标记点
					var marker = new AMap.Marker({
						position: lnglat,
						map: map
					});
					//点击事件
					var content = "";
					if (info.type == "2") {
						content = "签到时间：" + info.receiveDate + "<br/>";
					} else if (info.type == "3" || info.type == "4") {
						content = "签离时间：" + info.receiveDate + "<br/>";
					} else {
						content = "定位时间：" + info.receiveDate + "<br/>";
					}
					if (info.lengthOfStay) {
						content += "停留时间：" + info.lengthOfStay + "分钟";
					} else {
						// content += "停留时间：0分钟";
					}
					marker.content = content;
					marker.on('click', markerClick);
					marker.emit('click', {target: marker});
				}
				// 标记点点击事件
				function markerClick(e) {
					infoWindow.setContent(e.target.content);
					infoWindow.open(map, e.target.getPosition());
				}
				// 绘制轨迹
				polyline = new AMap.Polyline({
					map: map,
					path: lineArr,
					showDir:true,
					strokeColor: "#28F",  //线颜色
					// strokeOpacity: 1,     //线透明度
					strokeWeight: 6,      //线宽
					// strokeStyle: "solid"  //线样式
				});
		
				var passedPolyline = new AMap.Polyline({
					map: map,
					// path: lineArr,
					strokeColor: "#AF5",  //线颜色
					// strokeOpacity: 1,     //线透明度
					strokeWeight: 6,      //线宽
					// strokeStyle: "solid"  //线样式
				});
		
				map.setFitView();
			}

		</script>
		<!-- js代码 end -->
	</body>
</html>
